<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 特点：选中同名标签设置相同样式，无法差异化同名标签的样式 */
        p{
            color:red;
        }

         /* 一个类选择器可以给多个标签使用. */
        .red {
            color:blue
        }
        .size {
            font-size: 20px;
        }
        
    </style>
</head>
<body>
    <p>这是p标签，标签选择器哦</p>
    <p>这是p2标签，标签选择器</p>

    <!-- 一个标签可以使用多个类名，class属性值可以写多个类名，类名用空格隔开 -->
    <p class="red size">这是div标签</p>
</body>
</html>

<!-- 标签选择器：使用标签名作为选择器-> 选中 同名标签 设置 相同的样式
例如：p,h1,div,a,img...... -->

<!-- 类选中器：查找标签，差异化设置标签的显示效果
步骤：
    定义类选择器->.类名
    使用类选择器->标签添加class="类名"
    格式：
        <style>
            /* 定义类选择器 */
            .red{
                color:red;
            } -->
        <!-- </style> -->
        <!-- 使用类选择器 -->
         <!-- <div class="red">这是div 标签</div> -->